import BaseChart from './baseChart'

export default class DialGaugeChart extends BaseChart {
    //半径
    radius = 150
    //初始分数
    targetScore = 100
    //计算后的得分
    score = 0
    //定时器
    timer = 0
    //速度
    speed = 1
    //默认角度（即初始的分数）
    defaultAngle = this.targetScore
    dialLine = 26
    //偏移量
    offsetY = 0
    //刻度数量
    dialCount = 20
    //绘制刻度盘角度
    dialAngle = 180
    //需要旋转的角度
    rotateAngle = (this.dialAngle - 180) / 2
    constructor(eleName: string, score: number) {
        super(eleName, 1.2)

        this.targetScore = score * 100
        this.radius = this.calculateRatio(120)

        this.score = this.targetScore
        this.draw(this.ctx)
        // setTimeout(() => {
        //     this.animate()
        // }, 2000)
    }
    animate = () => {
        this.draw(this.ctx)

        this.timer = window.requestAnimationFrame(this.animate)

        //控制速度的缓慢减少
        if (this.defaultAngle <= 5) {
            this.defaultAngle = 5
        } else {
            this.defaultAngle -= 1
        }
        this.speed = Math.sin(this.defaultAngle * (Math.PI / 180))

        if (this.score <= this.targetScore) {
            this.score += 3 * this.speed
            if (this.score > this.targetScore) {
                this.score = this.targetScore
            }
        } else {
            this.score = this.defaultAngle
            window.cancelAnimationFrame(this.timer)
        }
    }
    draw(ctx: CanvasRenderingContext2D) {
        ctx.clearRect(0, 0, this.w_Width, this.w_Height)

        //绘制刻度底色
        ctx.beginPath()
        ctx.save()
        ctx.translate(this.w_Width / 2, (this.w_Height / 5) * 4)

        ctx.strokeStyle = '#39BF56'
        //绘制弧形
        ctx.lineWidth = this.calculateRatio(this.dialLine + 6)
        ctx.arc(
            0,
            0,
            this.radius,
            (this.rotateAngle * Math.PI) / 180,
            -Math.PI - (this.rotateAngle * Math.PI) / 180,
            true
        )
        ctx.stroke()
        ctx.restore()
        ctx.closePath()

        //绘制刻度底色
        ctx.beginPath()
        ctx.save()
        ctx.translate(this.w_Width / 2, (this.w_Height / 5) * 4)

        ctx.strokeStyle = '#39BF56'
        //绘制弧形
        ctx.lineWidth = this.calculateRatio(1)
        ctx.arc(
            0,
            0,
            this.radius + this.dialLine + this.dialLine,
            (this.rotateAngle * Math.PI) / 180,
            -Math.PI - (this.rotateAngle * Math.PI) / 180,
            true
        )
        ctx.stroke()
        ctx.restore()
        ctx.closePath()

        //绘制刻度
        for (let i = 0; i <= this.dialCount; i++) {
            ctx.beginPath()
            ctx.save()
            ctx.lineWidth = this.calculateRatio(3)
            ctx.strokeStyle = '#fff'
            ctx.translate(this.w_Width / 2, (this.w_Height / 5) * 4)
            this.offsetY = i == 0 || i == this.dialCount ? this.calculateRatio(4) : 0
            if (i % 2 === 0) {
                ctx.lineWidth = this.calculateRatio(3)
                ctx.moveTo(
                    (this.radius + 0) *
                        Math.cos(((-(this.dialAngle / this.dialCount) * i + this.rotateAngle) * Math.PI) / 180),
                    (this.radius + 0) *
                        Math.sin(((-(this.dialAngle / this.dialCount) * i + this.rotateAngle) * Math.PI) / 180) -
                        this.offsetY
                )
                ctx.lineTo(
                    (this.radius - this.calculateRatio((this.dialLine + 6) / 2)) *
                        Math.cos(((-(this.dialAngle / this.dialCount) * i + this.rotateAngle) * Math.PI) / 180),
                    (this.radius - this.calculateRatio((this.dialLine + 6) / 2)) *
                        Math.sin(((-(this.dialAngle / this.dialCount) * i + this.rotateAngle) * Math.PI) / 180) -
                        this.offsetY
                )
                ctx.fillStyle = '#666666'
                ctx.textAlign = 'center'
                ctx.textBaseline = 'middle'
                ctx.font = this.calculateRatio(12) + 'px Microsoft YaHei'
                ctx.fillText(
                    (this.dialCount - i) * 5 + '',
                    (this.radius - this.calculateRatio(this.dialLine + 6)) *
                        Math.cos(((-(this.dialAngle / this.dialCount) * i + this.rotateAngle) * Math.PI) / 180),
                    (this.radius - this.calculateRatio(this.dialLine + 6)) *
                        Math.sin(((-(this.dialAngle / this.dialCount) * i + this.rotateAngle) * Math.PI) / 180) -
                        this.offsetY
                )
            } else {
                ctx.lineWidth = this.calculateRatio(2)
                ctx.moveTo(
                    (this.radius - this.calculateRatio((this.dialLine + 6) / 4)) *
                        Math.cos(((-(this.dialAngle / this.dialCount) * i + this.rotateAngle) * Math.PI) / 180),
                    (this.radius - this.calculateRatio((this.dialLine + 6) / 4)) *
                        Math.sin(((-(this.dialAngle / this.dialCount) * i + this.rotateAngle) * Math.PI) / 180) -
                        this.offsetY
                )
                ctx.lineTo(
                    (this.radius - this.calculateRatio((this.dialLine + 6) / 2)) *
                        Math.cos(((-(this.dialAngle / this.dialCount) * i + this.rotateAngle) * Math.PI) / 180),
                    (this.radius - this.calculateRatio((this.dialLine + 6) / 2)) *
                        Math.sin(((-(this.dialAngle / this.dialCount) * i + this.rotateAngle) * Math.PI) / 180) -
                        this.offsetY
                )
            }

            ctx.stroke()
            ctx.restore()
            ctx.closePath()
        }

        //绘制圆点
        ctx.beginPath()
        ctx.fillStyle = '#39BF56'
        ctx.arc(this.w_Width / 2, (this.w_Height / 5) * 4, (this.w_Width * 3) / 375, 0, 2 * Math.PI)
        ctx.fill()
        ctx.closePath()

        //绘制指针
        ctx.beginPath()
        ctx.save()
        ctx.strokeStyle = '#39BF56'
        ctx.translate(this.w_Width / 2, (this.w_Height / 5) * 4)
        ctx.lineWidth = this.calculateRatio(2)
        ctx.moveTo(0, 0)
        ctx.lineTo(
            this.calculateRatio(60) *
                Math.cos((((this.score * this.dialAngle) / 2 / 50 - this.rotateAngle - 180) * Math.PI) / 180),
            this.calculateRatio(60) *
                Math.sin((((this.score * this.dialAngle) / 2 / 50 - this.rotateAngle - 180) * Math.PI) / 180)
        )
        ctx.stroke()
        ctx.restore()
        ctx.closePath()

        //绘制分数
        ctx.beginPath()
        ctx.save()
        ctx.translate(this.w_Width / 2, (this.w_Height / 5) * 4)
        ctx.textAlign = 'center'
        ctx.textBaseline = 'middle'
        ctx.font = this.calculateRatio(14) + 'px Microsoft YaHei'
        ctx.fillText(this.score.toFixed(1) + '%', 0, this.calculateRatio(20))
        ctx.restore()
        ctx.closePath()
    }
}
